<template>
  <div id="counter-event-example">
    <p>{{ total }}</p>
    <button-counter v-on:increment="incrementTotal"></button-counter>
    <button-counter v-on:increment="incrementTotal"></button-counter>
  </div>
</template>
<script>
  import Vue  from 'vue'

  export default {
    name: '',
    props: {},
    data() {
      return {
        total: 0
      };
    },
    methods: {
      incrementTotal: function () {
        this.total += 1
      }
    }
  };

  Vue.component('button-counter', {
    template: '<button v-on:click="increment">{{ counter }}</button>',
    //click的 触发会向上触发自定义事件incremnet，从而在函数incrementTotal中改变total的大小
    data: function () {
      return {
        counter: 0
      }
    },
    methods: {
      increment: function () {
        this.counter += 1
        this.$emit('increment')
      }
    },
  })


</script>
<style scoped>
    /* 本地样式 */
</style>
